<template>
    <div class="ratingselect">
      <div class="select-group">
        <div class="block positive" @click="selectedType(2)" :class="{'active': typeSelect===2}">{{desc.all}}<span class="subtext">{{rateNum.all}}</span></div>
        <div class="block positive" @click="selectedType(0)" :class="{'active': typeSelect===0}">{{desc.positive}}<span class="subtext">{{rateNum.positive}}</span></div>
        <div class="block negative" @click="selectedType(1)" :class="{'active': typeSelect===1}">{{desc.negative}}<span class="subtext">{{rateNum.negative}}</span></div>
      </div>
      <div class="toggle-switch"  @click="toggleSwitch">
        <i class="icon-check_circle" :class="{'on':onlycontent}"></i>
        <span class="text">只看有内容的评价</span>
      </div>
    </div>
</template>

<script>
    export default {
        name: "RangtingSelect",
        props:{
          selectType:{
            type: Number,
            default: 0
          },
          onlyContent:{
            type: Boolean,
            default: false
          },
          desc:{
            type: Object,
            default:{
              all: '全部',
              positive: '满意',
              negative: '不满意'
            }
          },
          rateNum:{
            type: Object,
            default:{
              all: 0,
              positive: 0,
              negative: 0
            }
          }
        },
      data(){
          return {
            typeSelect: this.selectType,
            onlycontent: this.onlyContent
          }
      },
      methods:{
        toggleSwitch(){
          this.onlycontent = !this.onlycontent;
          this.$emit('setOnlyContent',this.onlycontent);
        },
        selectedType(type){
          this.typeSelect = type;
          this.$emit('setRateType',this.typeSelect);
        }
      }
    }
</script>

<style lang="scss" scoped>
  .ratingselect{
    .select-group{
      display: flex;
      margin:0 18px;
      padding: 12px 0 18px 0;
     @include border-1px(rgba(7,17,27,.1));
      .block{
        padding: 8px 12px;
        border-radius: 2px;
        line-height: 16px;
        display: inline-block;
        font-size: 12px;
        margin-right: 4px;
        .subtext{
          font-size: 8px;
        }
        &.positive{
          background-color: rgba(0,160,220,0.2);
          color: rgb(77,85,93);
          &.active{
            background-color: rgb(0,160,220);
            color: #fff;
          }
        }
        &.negative{
          background-color: rgba(77,85,93,0.2);
          color: rgb(77,85,93);
          &.active{
            background-color: rgb(77,85,93);
            color: #fff;
          }
        }

      }
    }
    .toggle-switch{
      padding: 12px 18px;
      font-size: 0;
      border-bottom: 1px solid rgba(7,17,27,.1);
      .icon-check_circle{
        font-size: 24px;
        color: rgb(147,153,159);
        line-height: 24px;
        display: inline-block;
        vertical-align: top;
        &.on{
          color: #00b43c;
        }
      }
      .text{
        font-size: 12px;
        color: rgb(147,153,159);
        line-height: 24px;
        margin-left: 4px;
        display: inline-block;
      }
    }
  }
</style>
